<template>
    <div class="study">
        <ul class="study-header">
            <li
                v-for="(item, index) in studyStyle"
                :key="index"
                @click="handleChangeView(item)"
                :class="{ active: item.name === activeName }"
            >
                {{ item.name }}
            </li>
        </ul>
        <div class="content-container">
            <div style="width: 100%" class="question-container">
                <div v-if="activeName === '每日一练'" style="width: 96%">
                    <question-list
                        v-for="(question, index) in questions"
                        :key="index"
                        :questionType="question.questionType"
                        :questionText="question.statement"
                        :options="question.questionOptions"
                        :correctAnswer="question.correctOptions"
                        :standardAnswer="question.answers"
                    />
                </div>
                <content-list
                    v-else-if="activeName === '题目列表'"
                    :contentList="articleList"
                ></content-list>

                <content-list
                    v-else-if="activeName === '视频'"
                    :contentList="articleList"
                ></content-list>
            </div>
            <div class="pagination" v-if="activeName !== '每日一练'">
                <el-pagination
                    @current-change="handleCurrentChange"
                    background
                    layout="total,prev,pager,next"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :total="articleList.length"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import ContentList from "../components/ContentList";
import { everydayExercise, getAllArticle } from "../api/index";
import { studyStyle } from "@/assets/data/study";
import QuestionList from "../components/QuestionList";

export default {
    name: "study",
    components: {
        ContentList,
        QuestionList,
    },
    data() {
        return {
            questions: [
                // {
                //   questionType: '1',
                //   questionText: '1、What is the capital of France?',
                //   options: ['Berlin', 'Paris', 'London', 'Madrid'],
                //   correctAnswer: [2],
                //   standardAnswer: '无需解释',
                // },
                // {
                //   questionType: '2',
                //   questionText: '1、What is the capital of France?',
                //   options: ['Berlin', 'Paris', 'London', 'Madrid'],
                //   correctAnswer: [2, 3],
                //   standardAnswer: '无需解释',
                // },
                // {
                //   questionType: '3',
                //   questionText: '2、Is the Earth round?',
                //   correctAnswer: [1],
                //   standardAnswer: '无需解释',
                // },
                // {
                //   questionType: '4',
                //   questionText: '3、The capital of Japan is __________',
                //   standardAnswer: '无需解释',
                // },
            ],
            articleList: [
                // {
                //   id: 1,
                //   pic:
                //     'https://static.linhaojun.top/aurora/articles/f7963a082ffe11e411b1514e4c35337c.jpg',
                //   name: '测试数据',
                //   title: '测试标题',
                //   content: '测试文章',
                //   contentType: 1,
                // },
            ], // 文章数据
            pageSize: 8, // 页面大小，一页有8条数据
            currentPage: 1, // 当前页，默认第一页
            studyStyle: [], // 风格
            activeName: "每日一练", // 当前风格
        };
    },
    computed: {},
    mounted() {
        this.studyStyle = studyStyle;
        this.handleChangeView({ name: "每日一练" });
    },

    methods: {
        getStudyList() {
            let formData = {
                pageSize: this.pageSize,
                current: this.currentPage,
                contentType: 2, // 2题目
            };
            getAllArticle(formData).then((res) => {
                this.currentPage = 1;
                this.articleList = res.data.records;
            });
        },
        getVideoList() {
            let formData = {
                pageSize: this.pageSize,
                current: this.currentPage,
                contentType: 1, // 1视频
            };
            getAllArticle(formData).then((res) => {
                this.currentPage = 1;
                this.articleList = res.data.records;
            });
        },
        // 获取当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getStudyList();
        },
        // 根据类型显示对应的文章
        handleChangeView(item) {
            this.activeName = item.name;
            this.currentPage = 1;
            if (item.name === "每日一练") {
                // 获取每日一练
                everydayExercise().then((res) => {
                    this.questions = res.data;
                });
            } else if (item.name === "题目列表") {
                this.getStudyList();
            } else if (item.name === "视频") {
                this.getVideoList();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/study.scss";
</style>
